<script setup>
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';

const router = useRouter();
const store = useStore();

// 热映电影列表
store.dispatch('hot/updateHotMovieList');
const hotMovieList = computed(() => store.state.hot.hotMovieList);


const input = ref('');
// const Search = () => {
//   router.push({ path: '/', query: { q: input.value } });
// };

// 点击搜索框跳转
function toSearch() {
  router.push({ path: 'searchAll', query: { q: input.value } });
}

// 图片
const pic = [
  	// 图片地址
    'http://192.168.26.56:8081/static/img/3.cafea12.jpg',
    'http://192.168.26.56:8081/static/img/2.cf7651e.jpg',
    'http://192.168.26.56:8081/static/img/4.3dfbc92.jpg',
    'http://192.168.26.56:8081/static/img/1.1abcd57.jpg',
];
</script>

<template>
  <!-- 背景图 -->
  <div class="background">
    <el-carousel
      height="150px"
      interval="2000"
      indicator-position="none"
      arrow="never"
    >
      <el-carousel-item
        v-for="p in pic"
        :key="p"
      >
        <img :src="p">
      </el-carousel-item>
    </el-carousel>
    <!-- 头部 -->
    <div class="header">
      <div class="city">广州</div>
      <div class="inp">
        <i-ep-Search class="iconfont" />
        <el-input
          v-model="input"
          placeholder="找电影、影院"
          :prefix-icon="Search"
          @click="toSearch"
        />
      </div>
      <div class="date">
        <i-ep-Calendar class="iconfont" />
      </div>
    </div>
  </div>
  <div class="content">
    <div class="hot">
      <div class="title">
        <h3>正在热映</h3>
        <div class="more">
          <span>全部{{ hotMovieList.length }}部</span>
          <i-ep-ArrowRight class="iconfont" />
        </div>
      </div>
      <div class="list">
        <div
          class="item"
          v-for="m in hotMovieList"
          :key="m.movie_id"
        >
          <div class="movie-name">{{ m.name }}</div>
          <div class="sell">购票</div>
        </div>
      </div>
    </div>
    <div class="waitting">
      <div class="title">
        <h3>即将上映</h3>
        <div class="more">
          <span>全部0部</span>
          <i-ep-ArrowRight class="iconfont" />
        </div>
      </div>
    </div>
    <div class="blank">

    </div>
  </div>
</template>

<style lang="scss" scope>
body {
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  box-sizing: border-box;
}
.background {
  position: relative;
  height: 150px;
  .el-carousel {
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .header {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 0 10px;
    background-color: transparent;
    box-sizing: border-box;
    .city {
      padding: 2px 8px;
      border: 1px solid #fff;
      border-radius: 10px;
      font-size: 14px;
      color: #fff;
      margin-right: 4px;
    }
    .inp {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 55%;
      height: 30px;
      padding: 0 4px;
      margin: 0 10px;
      background-color: #fff;
      border-radius: 20px;
      .iconfont {
        font-size: 14px;
        color: #474747;
        margin-right: 8px;
      }
      .el-input {
        width: 80%;
        height: 0;
      }
    }
    .date {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 28px;
      height: 28px;
      margin-left: 6px;
      border-radius: 50%;
      border: 1px solid #fff;
      font-size: 16px;
      color: #fff;
    }
  }
}
.content {
  height: calc(100% - 130px);
  width: 100%;
  background-color: #eee;
  position: absolute;
  bottom: 0;
  border-radius: 12px 12px 0 0;
  .hot {
    width: 100%;
    background-color: #fff;
    border-radius: 12px 12px 0 0;
    margin-bottom: 4px;
    box-sizing: border-box;
    padding-bottom: 12px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      padding: 0 12px;
      h3 {
        flex: 1;
        font-size: 16px;
        color: #dd2727;
      }
      .more {
        display: flex;
        justify-content: right;
        align-items: center;
        flex: 1;
        height: 30px;
        border-radius: 20px;
        font-size: 14px;
        color: #474747;
        span {
          font-size: 12px;
          width: 80%;
          text-align: right;
        }
        .iconfont {
          font-size: 14px;
          color: #474747;
          margin-left: 4px;
        }
      }
    }
    .list {
      height: calc(100% - 50px);
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      padding: 0 12px;
      box-sizing: border-box;
      .item {
        height: 70px;
        border-radius: 4px;

        .movie-name {
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          color: #fff;
          background-color: #999999;
          text-align: center;
          border-radius: 4px 4px 0 0;
          overflow: hidden;
          -webkit-line-clamp: 1;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          word-break: break-all;
          line-break: anywhere;
        }
        .sell {
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          color: #fff;
          background-color: #dd2727;
          text-align: center;
          border-radius: 0 0 4px 4px;
        }
      }
    }
  }
  .waitting {
    width: 100%;
    background-color: #fff;
    margin-bottom: 4px;
    box-sizing: border-box;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      padding: 0 12px;
      h3 {
        flex: 1;
        font-size: 16px;
        color: #2d98f4;
      }
      .more {
        display: flex;
        justify-content: right;
        align-items: center;
        flex: 1;
        height: 30px;
        border-radius: 20px;
        font-size: 14px;
        color: #474747;
        span {
          font-size: 12px;
          width: 80%;
          text-align: right;
        }
        .iconfont {
          font-size: 14px;
          color: #474747;
          margin-left: 4px;
        }
      }
    }
  }
  .blank {
    width: 100%;
    height: calc(80% - 50px);
    background-color: #fff;
  }
}
</style>
